<template>
  <div class="demo-image__placeholder" style="backgroundColor:#F1F1F1">
    <div v-if="dynamicText" class="dynamic-text">
      车号:{{ dynamicText }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      数据下载时间：{{ dynamicTime }}
    </div>
    <div class="block" style="position: relative;backgroundColor:#F1F1F1">

      <img :src="hxd_back" alt="Train Image" usemap="#trainMap" class="train-image">

      <!-- 显示按钮 -->
      <el-button
        v-for="component in components"
        :key="`button-${component.name}`"
        :label="component.name"
        class="label_1"
        :style="{
          top: component.labelTop,
          left: component.labelLeft,
          color: getButtonColor(component) // 使用计算属性动态设置背景颜色
        }"
        @click="handleClick(component)"
      >
        {{ component.name }}
      </el-button>

      <!-- 弹出提示框 -->
      <el-tooltip
        v-if="activeComponent"
        :content="`Clicked on: ${activeComponent.name}`"
        placement="top"
        :open-delay="500"
        :visible.sync="tooltipVisible"
      />

      <!-- 组件详细信息模态框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        :title="`Details of ${selectedComponent.name}`"
        width="90%"
      >
<!--        <p><strong>Name:</strong> {{ selectedComponent.name }}</p>-->
<!--        <p><strong>Description:</strong> {{ selectedComponent.description }}</p>-->
<!--        &lt;!&ndash; 添加更多组件详细信息 &ndash;&gt;-->
<!--        <p v-if="selectedComponent.details"><strong>Details:</strong> {{ selectedComponent.details }}</p>-->
<!--        <span slot="footer" class="dialog-footer">-->
<!--          <el-button type="primary" @click="dialogVisible = false">Close</el-button>-->
<!--        </span>-->
        <checkResultClick></checkResultClick>
      </el-dialog>

    </div>
    <div style="float: right; backgroundColor:#F1F1F1">

      <!-- 红色方块图例 -->
      <div class="legend-block" style="background-color: red; margin-right: 10px;" />
      <!-- 绿色方块图例 -->
      <span style="margin-right: 10px;">
        数据未下载
      </span>
      <div class="legend-block" style="background-color: green; margin-right: 10px;" />
      <span>
        已下载
      </span>
    </div>

  </div>

</template>

<script>
import hxd_back from '@/assets/images/hxd_back_back.png'
import checkResultClick from '@/views/trainSystem/components/checkResultClick'

export default {

  name: 'TrainImage',
  components: { checkResultClick },
  data() {
    return {
      componentsList: [],
      showCheckResultClick: false, // 控制checkResultClick组件的显示
      dynamicText: 'HXD2-1467', // 初始化动态文本
      dynamicTime: '2024-10-08', // 初始化动态文本
      hxd_back,
      icons: [
        'fab fa-facebook',
        'fab fa-twitter',
        'fab fa-google-plus',
        'fab fa-linkedin',
        'fab fa-instagram'
      ],
      components: [
        { name: 'DDU', status: 'inactive', labelTop: '150px', labelLeft: '100px', description: 'Data Distribution Unit', details: 'Further details about DDU...' },
        { name: 'MPU', status: 'inactive', labelTop: '130px', labelLeft: '300px', description: 'Data Distribution Unit', details: 'Further details about DDU...' },
        { name: 'BCU', status: 'active', labelTop: '100px', labelLeft: '480px', description: 'Data Distribution Unit', details: 'Further details about DDU...' },
        { name: 'ACU1', status: 'warning', labelTop: '90px', labelLeft: '620px', description: 'Data Distribution Unit', details: 'Further details about DDU...' },
        { name: 'ACU2', status: 'warning', labelTop: '80px', labelLeft: '750px', description: 'Data Distribution Unit', details: 'Further details about DDU...' }
      ],
      activeComponent: {},
      tooltipVisible: false,
      dialogVisible: false,
      selectedComponent: {}
    }
  },
  methods: {
    // addComponent() {
    //   // 添加一个新的数据对象到数组中，每个对象代表一个组件实例
    //   this.componentsList.push({
    //     // 这里可以传递任何你需要的数据到组件
    //     id: this.componentsList.length + 1
    //   })
    // },
    handleComponentClick(component) {
      console.log('component', component)
      this.activeComponent = component
      this.tooltipVisible = true
      setTimeout(() => {
        this.activeComponent = null
        this.tooltipVisible = false
      }, 3000)
      this.selectedComponent = component
      this.dialogVisible = true
    },
    // handleClick(component) {
    //
    //   const routeUrl = this.$router.push(`/check-result-click?data=nihao`).href
    //
    //   window.open(routeUrl, '_blank')// '_blank' 表示在新标签页中打开
    // },
    handleClick(component) {
      // 使用this.$router.resolve来获取完整的路由URL
      const route = this.$router.resolve({ path: '/check-result-click', query: { data: 'nihao' } });

      // 获取解析后的URL
      const routeUrl = route.href

      // 在新标签页中打开URL
      window.open(routeUrl, '_blank') // '_blank' 表示在新标签页中打开
    },
    // 添加一个方法来根据组件的状态返回颜色
    // handleComponentClick(component) {
    //   console.log('component', component)
    //   this.activeComponent = component
    //   this.tooltipVisible = true
    //   setTimeout(() => {
    //     this.activeComponent = null
    //     this.tooltipVisible = false
    //   }, 3000)
    //   this.selectedComponent = component
    //   this.dialogVisible = true
    //   // 创建 checkResultClick 页面的逻辑
    //   this.createCheckResultClickPage()
    // },
    // createCheckResultClickPage() {
    //   // 这里可以添加创建页面的逻辑
    //   // 例如，您可以通过 Vue Router 跳转到 checkResultClick 页面
    //   // 如果您有一个路由名为 'checkResultClick'，可以这样使用：
    //   // this.$router.push({ path: '/check-result-click' })
    //   window.open('/check-result-click', '_blank')
    //   // 或者，如果您需要在当前页面内动态创建组件，可以使用 Vue 的动态组件
    //   // 例如，您可以添加一个 data 属性来控制 checkResultClick 组件的显示
    //   this.showCheckResultClick = true
    // },
    getButtonColor(component) {
      // 假设每个组件都有一个 status 属性，根据这个属性来决定颜色
      if (component.status === 'active') {
        return 'green' // 活动状态为绿色
      } else if (component.status === 'inactive') {
        return 'red' // 非活动状态为红色
      } else if (component.status === 'warning') {
        return 'orange' // 警告状态为橙色
      }
      // 默认颜色
      return 'blue'
    }
  }
}
</script>

<style scoped>
.train-image {
  width: 100%; /* 设置图片宽度，确保与图片的实际尺寸相匹配 */
  height: auto; /* 高度自动保持比例 */
  position: relative; /* 使得图片成为定位上下文 */
}

.label_1 {
  position: absolute;
  cursor: pointer;
  /* 设置字体大小为24px */
  font-size: 24px; /* 使用 !important 强制应用样式 */
  /* 如果需要调整按钮样式，可以在这里添加 */
  border: none; /* 去除边框 */
  background-color: transparent;

}

.dynamic-text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
  font-size: 24px; /* 根据需要调整字体大小 */
  color: #333; /* 根据需要调整字体颜色 */
  z-index: 10; /* 确保文字在图片上方 */
}
.legend-block {
  display: inline-block; /* 使方块横向排列 */
  width: 20px; /* 设置方块宽度 */
  height: 20px; /* 设置方块高度 */
  border: 1px solid #000; /* 设置边框，可根据需要调整 */
}

/* 根据需要调整v-footer的样式 */
.v-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
